<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/head.css" rel="stylesheet" />

	</head>
	<body>
		<header class="mui-bar mui-bar-nav title">

			<h1 class="mui-title title-color" id="weiliao_title"><b>微聊</b></h1>
		</header>


		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" tabindex="0">
				<span class="mui-icon mui-icon-weixin"></span>
				<span class="mui-tab-label">微聊</span>
			</a>
			<a class="mui-tab-item" tabindex="1">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">通信录</span>
			</a>
			<a class="mui-tab-item" tabindex="2">
				<span class="mui-icon mui-icon-paperplane"></span>
				<span class="mui-tab-label">发现</span>
			</a>
			<a class="mui-tab-item" tabindex="3">
				<span class="mui-icon mui-icon-person"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>


		<script type="text/javascript" charset="utf-8">
			mui.init();
			// 设备准备完毕
			mui.plusReady(function() {
				plus.navigator.setStatusBarStyle("light")
				plus.navigator.setStatusBarBackground("007AFF")
			});
			var weiliaoArray = [{
					pageId: "weiliao-chatlist.html",
					pageUrl: "weiliao-chatlist.html"
				},
				{
					pageId: "weiliao-contact.html",
					pageUrl: "weiliao-contact.html"
				},
				{
					pageId: "weiliao-discover.html",
					pageUrl: "weiliao-discover.html"
				},
				{
					pageId: "weiliao-me.html",
					pageUrl: "weiliao-me.html"
				}
			];

			var weiliaoStyle = {
				top: "44px",
				bottom: "50px"
			}
			mui.plusReady(function() {
				
				//禁止返回登录注册页面
				mui.back = function() {
					return false;
				}	
				// 对网络连接进行事件监听
				// alert("1111")
				netChangeSwitch();
				// alert("2222")
				// 获取当前的webview对象
				var indexWebview = plus.webview.currentWebview();
				// alert(111)
				// 向当前的主页webview追加子页的4张webview对象
				for (var i = 0; i < weiliaoArray.length; i++) {
					var weiliaoPage = plus.webview.create(weiliaoArray[i].pageUrl,
						weiliaoArray[i].pageId,
						weiliaoStyle);
					// alert(111)
					// 隐藏webview窗口
					weiliaoPage.hide();
					// 追加每一个子页面到当前主页面
					indexWebview.append(weiliaoPage);
				}
				plus.webview.show(weiliaoArray[0].pageId)

				// 批量绑定tap事件，展示不同的页面
				mui(".mui-bar-tab").on("tap", "a", function() {
					//获取id
					// alert(tabindex);
					var tabindex = this.getAttribute("tabindex")
					// 显示点击的tab选项所对应的页面
					plus.webview.show(weiliaoArray[tabindex].pageId, "fade-in", 200);
					// 隐藏其他的不需要的页面
					for (var i = 0; i < weiliaoArray.length; i++) {
						if (i != tabindex) {
							plus.webview.hide(weiliaoArray[i].pageId, "fade-out", 200);
						}
					}
				})
				// 延时加载
				setTimeout("initData()", "1000");
			});
			// 监听网络状态更改
			function netChangeSwitch() {
					// alert("3333");
			
				document.addEventListener("netchange", function() {
					// 网络状态获取和判断
					// alert("4444");
					var connectionStatus = plus.networkinfo.getCurrentType();
					// alert(connectionStatus);
					console.log(connectionStatus)
					if (connectionStatus != 0 && connectionStatus != 1) {
						// 重新打开网络连接
						var weiliao_title = document.getElementById("weiliao_title");
						weiliao_title.innerHTML = "<b>微聊</b>";
					} else {
						// 关闭网络连接
						var weiliao_title = document.getElementById("weiliao_title");
						weiliao_title.innerHTML = "<b>微聊(未连接)</b>";
					}
				});
			}
			
			// 预加载
			function initData() {
				var weiliao_chatlist = plus.webview.getWebviewById("weiliao_chatlist.html");
				//触发自定义事件
				mui.fire(weiliao_chatlist, "refresh");

				var weiliao_me = plus.webview.getWebviewById("weiliao_me.html");
				mui.fire(weiliao_me, "refresh");
			}
		</script>

	</body>
</html>
